<template>
  <div v-if="main" class="appContent">
    <queryFormView :table="main" :link-biz-pk="id" />
    <el-card v-if="children" :header="children.Show" style="margin-top: 10px;">
      <queryTable :table="children" />
    </el-card>
    <el-tabs v-else-if="subList" v-model="chiose" type="border-card" style="margin-top: 10px;">
      <el-tab-pane v-for="item in subList" :key="item.Id" :name="item.Id" :label="item.Show">
        <queryTable :table="item" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { GetRecord } from '@/customForm/api/queryForm'
import queryTable from '@/customForm/components/queryTable/queryTableView.vue'
import queryFormView from '@/customForm/components/queryTable/queryFormView.vue'
export default {
  components: {
    queryTable,
    queryFormView
  },
  data() {
    return {
      id: null,
      formId: null,
      main: null,
      chiose: null,
      children: null,
      subList: null,
      colAlign: {
        0: 'left',
        1: 'center',
        2: 'right'
      }
    }
  },
  computed: {},
  mounted() {
    this.id = this.$route.params.id
    this.formId = this.$route.params.formId
    this.reset()
  },
  methods: {
    async reset() {
      const body = await GetRecord(this.formId, this.id)
      this.main = body.Main
      if (body.Children && body.Children.length === 1) {
        this.children = body.Children[0]
      } else if (body.Children && body.Children.length > 1) {
        this.subList = body.Children
        this.chiose = body.Children[0].Id
      }
    }
  }
}
</script>

<style scoped>
.appContent {
    padding: 10px;
}
</style>
